import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components'
import background from '@/images/background3.png'

const Month = () => {
  // 按月做数据的分组
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(() => {
    // return出去计算之后的值
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY | M'))
  }, [billList])
  // 控制弹框的打开和关闭
  const [dateVisible, setDateVisible] = useState(false)

  // 控制时间显示
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format('YYYY | M')
  })

  const [currentMonthList, setMonthList] = useState([])

  const monthResult = useMemo(() => {
    // 支出    /   收入   /   结余
    const pay = currentMonthList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = currentMonthList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [currentMonthList])

  // 初始化时将当前月的统计数据显示出来
  useEffect(() => {
    setMonthList(monthGroup[currentDate] ?? [])
  }, [monthGroup])

  // 时间确认回调
  const onConfrim = (date) => {
    setDateVisible(false)
    // 其他逻辑
    const formatDte = dayjs(date).format('YYYY | M')
    setMonthList(monthGroup[formatDte] ?? [])
    setCurrentDate(formatDte)
  }

  // 当前月份按照日期进行分组
  const dayGroup = useMemo(() => {
    // return出去计算之后的值
    const groupDate = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY.M.D'))
    // 获取 groupDate的key并进行排序
    const keys = Object.keys(groupDate).sort((a, b) => {
      return Number(a.slice(a.lastIndexOf('.') + 1)) - Number(b.slice(b.lastIndexOf('.') + 1))
    })
    return {
      groupDate,
      keys
    }
  }, [currentMonthList])

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        {/* 背景图片：style={{backgroundImage:`url(${background})`}} */}
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={() => setDateVisible(true)}>
            <span className="text">{currentDate + ''}月账单</span>
            <span className={classNames('arrow', dateVisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            touch-action="pan-y"
            visible={dateVisible}
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfrim}
            max={new Date()}
          />
        </div>
        {/* 单日列表统计 */}
        {
          dayGroup.keys.map(key => {
            return <DailyBill key={key} date={key} billList={dayGroup.groupDate[key]} />
          })
        }
      </div>
    </div>
  )
}

export default Month
